<template>
    <transition name="fade">
        <div class="dialog"
             v-show="show">
            <div class="left">
                <leftTop :info="leftTopData"></leftTop>
                <leftBottom :info="leftBottomData"></leftBottom>
            </div>
            <div class="right">
                <rightTop :info="rightTopData"></rightTop>
                <rightBottom :info="rightBottomData"></rightBottom>
            </div>
            <div class="close-btn"
                 @click="close"></div>
        </div>
    </transition>
</template>

<script>
import leftTop from './components/leftTop.vue'
import leftBottom from './components/leftBottom.vue'
import rightTop from './components/rightTop.vue'
import rightBottom from './components/rightBottom.vue'
import { API } from '@/api/index.js'
export default {
    components: { leftTop, rightTop, rightBottom, leftBottom },
    props: {
        interval: {},
    },
    data() {
        return {
            show: true,
            leftTopData: {},
            rightBottomData: {},
            leftBottomData: {},
            rightTopData: {},
            timer: null,
        }
    },
    computed: {},
    methods: {
        open() {
            this.getData()
            // this.show = true
            // this.timerInit()
        },
        close() {
            this.show = false
            this.$emit('close')
            clearTimeout(this.timer)
        },
        getData() {
            this.$axios
                .get(API.dialogStatic)
                .then((resData) => {
                    const res = resData.data ? resData.data : resData
                    this.generateData(res)
                })
                .catch((err) => {
                    console.log(err.message)
                    this.fetchStaticData()
                })
        },
        // 备选静态数据
        fetchStaticData() {
            this.$axios.get(API.dialogStatic).then((resData) => {
                const res = resData.data
                this.generateData(res)
            })
        },
        generateData(res) {
            this.leftTopData = res.leftTopData
            this.rightBottomData = res.rightBottomData
            this.leftBottomData = res.leftBottomData
            this.rightTopData = res.rightTopData
        },
        timerInit() {
            this.timer = setTimeout(() => {
                this.close()
            }, this.interval * 1000)
        },
    },
    created() {},
    mounted() {
        // setInterval(() => {
        //     if (this.show) {
        //         this.close()
        //     } else {
        //         this.open()
        //     }
        // }, this.interval * 1000)
        this.open()
    },
}
</script>
<style lang='less' scoped>
.dialog {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../../assets/img/dialog/bg.png);
    z-index: 999;
    .close-btn {
        width: 85px;
        height: 89px;
        left: 1803px;
        top: 90px;
        cursor: pointer;
        position: absolute;
    }
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
</style>
